<template>
    <div class="content">
        <div class="pc">
            <div class="left-img">
                <img src="../assets/bottom_19.png">
            </div>
            <div class="right-list">
                <div class="item" @click="navigate('/')">首页</div>
                <div v-for="(item, i) in toplistData" :class="i <= 5 ? '' : 'displayNo'" class="item"
                    @click="navigateData('/produc', '1', item.record_id)">
                    {{ item.title }}
                </div>
                <div class="item" @click="navigate('/newslist')">新闻中心</div>
                <div class="item" @click="navigate('/aboute')">联系我们</div>
            </div>
        </div>
        <div class="lunbo">
            <el-carousel height="451px">
                <el-carousel-item v-for="item in lunboData" :key="item">
                    <img :src='item' alt="">
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { getTopList } from '../api/api/ProducView'
import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const lunboData = [
    new URL('../assets/lunbo/1.jpg', import.meta.url).href,
    new URL('../assets/lunbo/2.jpg', import.meta.url).href,
    new URL('../assets/lunbo/3.jpg', import.meta.url).href]


const checValue = ref(false)

const toplistData = ref([])

const _getTopList = () => {
    getTopList('sj1').then((res) => {
        console.log('顶部栏信息', res);
        toplistData.value = res.data.toplist_ids
    })
}

// 跳转
const navigate = (path) => {
    // 发送查询参数
    router.push({
        path: path
    })
}
const navigateData = (path, checkId, id) => {
    // 发送查询参数
    router.push({
        path: path,
        query: { checkId: checkId, id: id }
    })
    console.log(route.path);

    if (route.path == '/produc') {
        setTimeout(() => {
            window.location.reload()
        }, 100);
    }
}

const close = () => {
    checValue.value = !checValue.value
}

onMounted(() => {
    _getTopList()
});

</script>
<style scoped lang="scss">
@media (min-width: 800px) {
    .content {

        .pc {
            margin: 0 auto;
            padding: 20px 0 10px 0;
            display: flex;
            width: 1200px;

            .left-img {
                img {
                    width: 150px;
                }

                margin-right: 20px;

            }

            .right-list {
                line-height: 49px;
                width: 100%;
                display: flex;
                justify-content: space-around;

                .item {
                    cursor: pointer;
                }

                .item:hover {
                    color: orange;
                    border-bottom: 2px solid orange;
                }
            }
        }

        .lunbo {
            margin: 0 auto;
            max-width: 1920px;

            .carousel-item-content {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100%;
                width: 100%;

                img {
                    max-width: 100%;
                    max-height: 100%;
                    object-fit: contain;
                    /* Ensures the image is fully visible while maintaining aspect ratio */
                }
            }
        }
    }
}

// 取消显示pc端 显示手机端
@media screen and (max-width: 799px) {
    .content {

        .pc {
            background-color: white;

            .left-img {
                padding: 20px;
                display: flex;
                justify-content: center;
                img {

                    width: 200px;
                }
            }

            .right-list {
                font-size: 10px;
                line-height: 30px;
                border: 1px solid gainsboro;
                text-align: center;
                display: grid;
                grid-template-columns: repeat(4, 1fr);
                /* 4 列，每列宽度均分 */
                gap: 10px;
                /* 列间距 */
                .item {
                    padding: 4px;
                    border: 1px solid rgb(51, 146, 255);
                    border-radius: 6px;
                    background-color: rgb(51, 146, 255);
                    color: white;
                    font-weight: 700;
                }
            }

        }

        .lunbo {
            display: none;
        }
    }
}
</style>